<template>
  <el-form label-width="120px" ref="form" :model="formData" :rules="rules" @submit.prevent="onFormSubmit">
    <el-form-item label="站点LOGO">
      <el-row>
        <el-col :span="16">
          <k-input-upload v-model="formData.logo" />
        </el-col>
        <el-col :span="8">
          <k-help>建议使用300x180尺寸的图片</k-help>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="站点标题" prop="title">
      <el-row>
        <el-col :span="16">
          <el-input v-model="formData.title" />
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="联系电话">
      <el-row>
        <el-col :span="16">
          <el-input v-model="formData.tel" />
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item label="联系QQ">
      <el-row>
        <el-col :span="16">
          <el-input v-model="formData.qq" />
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" native-type="submit" :loading="subIng">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import KInputUpload from '@/components/input-upload/input-upload.vue'
import KHelp from '@/components/help/KHelp.vue'
import { useConfigStore } from '@/store/config'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'SettingBase',
  components: { KHelp, KInputUpload },
  setup () {
    const configStore = useConfigStore()
    const subIng = ref(false)
    const form = ref<any>(null)
    const formData = ref<BaseConfig>(configStore.data.base as any)
    const rules = ref({
      title: [{ required: true, message: '请填写站点标题' }]
    })

    // 监听配置值更新
    configStore.$subscribe((mutation, state) => {
      formData.value = state.data.base as any
    })

    // 保存配置
    const onFormSubmit = async () => {
      await form.value.validate()
      subIng.value = true
      try {
        await configStore.saveData({
          base: formData.value
        })
        ElMessage.success('保存成功')
      } catch (e) {
        ElMessage.error(e.message)
      } finally {
        subIng.value = false
      }
    }
    return {
      form,
      formData,
      rules,
      subIng,
      onFormSubmit
    }
  }
})
</script>
